<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
	<meta name="google" content="notranslate">
	<title>文章列表</title>
	<link rel='stylesheet' id='global-css'  href='/css/style.css?ver=4.4.2' type='text/css' media='all' />
	<script type='text/javascript' src='/script/libs.min.js?ver=4.4.2'></script>
	<script type='text/javascript' src='/script/functions.js?ver=4.4.2'></script>
	<script type='text/javascript' src='/script/common.js'></script>
    <script type="text/javascript">
    var baseUrl = 'http://127.0.0.1/article/list';
    $(document).ready(function () {
		// 初始化页面
		ajax.get(baseUrl, {"articleTitle":null, "pageNo": 1, "pageSize": 10}, viewList);

		// 查询功能绑定
		$(document).on("click", "#btn_search", function(){
		  search();
		});
		$(document).on("click", "#btn_add", function(){
			window.open("article_add.html", "_self");
		})
    });

 // 回掉函数：一览展示
    function viewList(data){
      console.log(data);
      vm.$set('list', data.data.list);
    }

    // 查询
    function search(){
      var articleTitle = $("#articleTitle").val();
      var conditions = {
          "articleTitle": articleTitle
          ,"pageNo": 1
          ,"pageSize": 10
      }
      ajax.get(baseUrl, conditions, viewList);
    }
    </script>
</head>
<body>
	<div id="wrap" class="wrap">
		<header id="header" class="header">
			<h1 class="logo">
				<a href="index.html"  id="admin-menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="jk-Blog">
					<label>jk-Blog</label>
					<span class="css-arrow-bottom"></span>
				</a>
			</h1>
			<div class="right-side">
				<div class="news">
					<a href="">
						<label>3</label>
						<img class="js-svg" src="images/svg/info.svg">
					</a>
				</div>
				<div class="dropdown settings">
					<a class="button" id="settings" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" title="大白">
						<label class="avatar"><img src="images/logo-x.png" alt="da bai"></label>
						<span class="css-arrow-bottom"></span>
					</a>
					<ul class="dropdown-menu" aria-labelledby="settings">
						<li><a href="user-info.html">账号信息</a></li>
						<li><a href="notification-settings.html">通知设置</a></li>
						<li role="separator" class="divider"></li>
						<li><a class="small" href="login.html">退出</a></li>
					</ul>
				</div>
			</div>
		</header>

		<div class="container">
			<div class="ajax-container">

				<section class="content">
					<div class="ui-list ui-project-list">
						<h1 class="section-heading">文章一览</h1>

						<div class="filter form-inline clearfix">

							<div class="form-group"> 
								<label for="project-name">文章搜索</label> 
								<div class="input">
									<input type="text" class="form-control" id="articleTitle" placeholder="">
								</div>
								<div class="buttons">
									<button id="btn_search" type="button" class="btn btn-info">查询</button>
								</div>
							</div> 
						</div>

						<div class="btn-col">
							<button id="btn_add" class="btn btn-info" style="min-width: 80px;margin-bottom: 20px;">文章发表</button>
						</div>

						<div class="list">
							<table class="table table-hover">
								<thead> 
									<tr> 
										<th>序号</th> 
										<th>文章标题</th>
										<th>发布时间</th>
										<th>阅读</th>
										<th>收藏</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody id="js-vue">
									<tr v-for="record in list">
										<th scope="row">{{$index+1}}</th>
										<td>{{record.articleTitle}}</td>
										<td>{{record.publishTime}}</td>
										<td>{{record.readingCount}}</td> 
										<td>{{record.collectionCount}}</td> 
										<td class="operating" articleId="{{record.id}}">
											<span class="js-view"><a href="article_detail.html?id={{record.id}}"><img class="js-svg" src="images/svg/view.svg"></a></span>
											<span class="js-edit"><img class="js-svg" src="images/svg/edit.svg"></span>
										</td> 
									</tr>
									
								</tbody>
							</table>
						</div>
					</div>
				</section>
			</div>
		</div>


	</div>
</body>
</html>